<!DOCTYPE html>
<html lang="en">
<head>
	<title>Judy's profile page</title>
	 <!-- add bootstrap css file -->

      <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
  <!-- navbar -->

  <nav class="navbar navbar-expand-lg fixed-top ">
	  <a class="navbar-brand" href="#">Home</a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>

	  <div class="collapse navbar-collapse " id="navbarSupportedContent">
	    <ul class="navbar-nav mr-4">
	      
	      <li class="nav-item">
	        <a class="nav-link" data-value="about" href="#">About</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="blog" href="#">Blog</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="team" href="#">
	        Team</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link " data-value="contact" href="#">Contact</a>
	      </li>
	    </ul>
	    
	  </div>
</nav>
<!-- header -->
<header class="header ">
  <div class="overlay"></div>
   <div class="container">
   	  <div class="description ">
  	<h1>
  		Hello ,Welcome To My official Website
  		<p>
  		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  		<button class="btn btn-outline-secondary btn-lg">See more</button>
  	</h1>
  </div>
   </div>
  
</header>

<!-- about section -->
<div class="about" id="about">
	<div class="container">
	  <h1 class="text-center">About Me</h1>
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/team-0.jpg" class="img-fluid">
				<span class="text-justify">Lively and smiley Judy</span>
			</div>
			<div class="col-lg-8 col-md-8 col-sm-12 desc">
			  
				<h3>Judy</h3>
				<p>
					Hi there! I'm Judy, a bubbly and laughter-loving girl with a zest for life. 
					My heart leaps with joy at the sight of nature's beauty and the thrill of exploration. 
					As an INTJ, I'm known for my knack of independent thinking and my passion for debating and philosophy. 
					My friends describe me as a reliable and responsible person, having led my class for seven years with great camaraderie.
					<br>
					I'm also a lifelong learner, constantly discovering and sharing knowledge on platforms like CSDN, Gitee, and GitHub. 
					In 2023, I've shared 96 articles on CSDN, reaching 34,680 views, and contributed 373 times to Gitee, 
					showcasing my enthusiasm for knowledge and learning.
					<br>
					Finally, I think very much of the harmonious friends who have accompanied me for 3 years, thank you for having you!
				</p>

				<audio controls> <source src="./images/portfolio/introduction.mp3" type="audio/mpeg">Self-introduction </audio>
			</div>
		</div>
	</div>
</div>

<!-- portfolio -->
<div class="portfolio" id="portfolio">
     <h1 class="text-center">Interesting</h1>
	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port13.png" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port1.png" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port6.png" class="img-fluid">
			</div>

			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port3.png" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port11.png" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/electric.png" class="img-fluid">
			</div>

			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/Classic.jpg" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port4.png" class="img-fluid">
			</div>
			<div class="col-lg-4 col-md-4 col-sm-12">
				<img src="images/portfolio/port8.png" class="img-fluid">
			</div>
		</div>
	</div>
</div>


<!-- Posts section -->
<div class="blog" id="blog">
	<div class="container">
	<h1 class="text-center">Blog</h1>
		<div class="row">
			<div class="col-md-4 col-lg-4 col-sm-12">
				<div class="card">
					<div class="card-img">
						<img src="images/posts/polit.jpg" class="img-fluid">
					</div>
					
					<div class="card-body">
					<h4 class="card-title">C语言!!!!</h4>
						<p class="card-text">
							
							 [Error] subscripted value is neither array nor pointer nor vector
						</p>
					</div>
					<div class="card-footer">
						<a href="https://blog.csdn.net/wangsrc/article/details/132658327?spm=1001.2014.3001.5502" class="card-link">Read more</a>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-lg-4 col-sm-12">
				<div class="card">
					<div class="card-img">
						<img src="images/posts/images.jpg" class="img-fluid">
					</div>
					
					<div class="card-body">
					   <h4 class="card-title">Python与数据库连接</h4>
						<p class="card-text">
							
							[Error]AttributeError: 'UsingMysql' object has no attribute '_log_time'
						</p>
					</div>
					<div class="card-footer">
						<a href="https://blog.csdn.net/wangsrc/article/details/138087180?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171533243616800185831182%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171533243616800185831182&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-138087180-null-null.nonecase&utm_term=%E6%95%B0%E6%8D%AE%E5%BA%93&spm=1018.2226.3001.4450" class="card-link">Read more</a>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-lg-4 col-sm-12">
				<div class="card">
					<div class="card-img">
						<img src="images/posts/imag2.jpg" class="img-fluid">
					</div>
					
					<div class="card-body">
					<h4 class="card-title">Python正则表达式</h4>
						<p class="card-text">
							
							在 Python 中，使用 re 模块来处理正则表达式。<br>

						</p>
					</div>
					<div class="card-footer">
						<a href="https://blog.csdn.net/wangsrc/article/details/137521245?spm=1001.2014.3001.5502" class="card-link">Read more</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Team section -->
<div class="team" id="team">
	<div class="container">
	   <h1 class="text-center">Harmonious Firends</h1>
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="images/team-2.jpg" class="img-fluid" alt="team">
				<div class="des">
				 	Laura
				 </div>
				<span class="text-muted">Manager</span>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="images/team-3.jpg" class="img-fluid" alt="team">
				<div class="des">
				 	 Judy
				 </div>
				<span class="text-muted">Game Design Director</span>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="" class="img-fluid" alt="team">
				<div class="des">
					David 
				 </div>
				<span class="text-muted">Front End Developer</span>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 item">
				<img src="" class="img-fluid" alt="team">
				 <div class="des">
					Laylo
				 </div>
				<span class="text-muted">Director Of Operations</span>
			</div>
		</div>
	</div>
</div>

<!-- Contact form -->
<div class="contact-form" id="contact">
	<div class="container">
		<form>
			<div class="row">
				<div class="col-lg-4 col-md-4 col-sm-12">
				  <h1>Get in Touch</h1>	
				</div>
				<div class="col-lg-8 col-md-8 col-sm-12 right">
				   <div class="form-group">
				   	 <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
				   </div>
				   <div class="form-group">
				   	 <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
				   </div>
				   <div class="form-group">
				   	 <textarea class="form-control form-control-lg">
				   	 	
				   	 </textarea>
				   </div>
				   <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
				</div>
			</div>
		</form>
	</div>
</div>
	
	<footer class="footer mt-auto py-3" style="background:#F97300;">
	<div class="container">
		<p class="text-center text-white lead">runoobwang &copy; <script type="text/javascript">
			document.write(new Date().getFullYear());
		  </script> 197889917@qq.com 快来联系我吧~</p>
	  
	</div>
  </footer>
<!-- add Javasscript file from js file -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src='js/main.js'></script>

</body>
</html>
